<template>
    <div>
        <div style="margin-top: 20px">
            <el-card style="margin: 0 0 0 12.5%;width: 75%">
                <el-row :gutter="30">

                    <el-col :offset="2" :span="20">
                            <el-divider></el-divider>
                            <div style="border-bottom: 1px dashed #ccc;">
                                <h1 style="text-align: center">{{ article.title }}</h1>
                                <p style="text-align: center;color: #999;">
                                    <span class="ml-20"><i class="el-icon-time mr-5"></i>发布时间：{{ article.creattime }}</span>
                                </p>
                            </div>
                            <p v-html="article.content"></p>
                    </el-col>
                </el-row>
            </el-card>
        </div>
    </div>
</template>

<script>

    import request from "@/request";

    export default {
        name: "News",
        data() {
            return {
                article: '',
                newsId: '',
                //左侧
                classificationList: [],
                ArticleData: [],

            }
        },
        created() {
            //通过路径获取参数
            this.newsId = this.$route.query.id;
            this.getArticle(this.newsId);
        },
        methods: {
            //通过新闻 id 获取新闻内容
            getArticle(newsId) {
                //通过id查询新闻内容
                request.get('/news/getbyid/'+newsId).then((res) => {
                    if (res.code==200) {
                        this.article = res.data
                        // console.log(res.data);
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        })
                    }
                })
            },

        }
    }
</script>

<style scoped>

    ul {
        margin: 0;
        list-style: none;
        padding: 0;
    }

    li {
        border-bottom: 3px solid #fff;
        line-height: 45px;
        padding: 0 0 0 25px;
        color: #555555;
        font-size: 16px;
    }

    li:hover {
        color: #FF9933;
    }

    .title {
        margin: 0;
        font-size: 20px;
        width: 400px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
    }

    .content {
        margin: 5px 0 5px 0;
        width: 400px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }
</style>